<template>
	<view class="temp">
		<view class="serviceContent">
			<u--form labelPosition="left" :model="model" :rules="rules" labelWidth='80' ref="uForm">
				<u-radio-group v-model="radiovalue" placement="row">
					<u-radio v-for="(item, index) in radiolist" :key="index" activeColor='#44D4A8' :label="item.name"
						:name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
				<u-form-item label="医师名称" prop="userInfo.name" borderBottom style="margin-top: 42rpx;">
					<u--input placeholder='请输入' v-model="model.info.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="医师职称" prop="userInfo.name" borderBottom>
					<u--input v-model="model.info.name" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="价格" prop="userInfo.name" borderBottom>
					<u--input v-model="model.info.name" border="none"></u--input>
					<text>元</text>
				</u-form-item>
				<u-form-item label="服务时长" prop="userInfo.name" borderBottom>
					<u--input v-model="model.info.name" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="医师照片" prop="userInfo.name" class="fm">
					<view class="upload" @tap="sheetShow=true">
						<view class="iconfont icon-xiangce">
						</view>
						<text>照片/视频</text>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="commonBtn">
			<view class="btnCon">
				<text>保存</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiolist: [{
						name: '推拿按摩',
					},
					{
						name: '健康讲解',
					},
					{
						name: '康复训练',
					},
					{
						name: '护理服务',
					},
					{
						name: '其他服务',
					}
				],
				radiovalue: '推拿按摩',
				model: {
					info: {
						name: '',
					},
				},
				rules: {
					'info.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.temp {
		position: relative;

		.serviceContent {
			padding:  0 24rpx 24rpx 24rpx;
			background-color: #fff;
		}
	}

	.upload {
		width: 206rpx;
		height: 206rpx;
		border-radius: 8rpx;
		background: rgb(246, 248, 252);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 40rpx;
		color: rgba(152, 160, 166, 1);

		.iconfont {
			font-size: 38rpx;
			margin-bottom: 10rpx;
		}
	}

	.u-radio-group--row {
		flex-wrap: wrap;
	}

	::v-deep .u-radio-group--row {
		flex-wrap: wrap;
	}

	.u-radio__icon-wrap {
		margin-right: 16rpx;
	}

	::v-deep .u-radio__icon-wrap {
		margin-right: 16rpx;
	}

	.u-radio {
		margin-right: 86rpx;
	}

	::v-deep .u-radio {
		margin-right: 50rpx;
		margin-top: 48rpx;
	}

	.fm {
		::v-deep .u-form-item__body {
			flex-direction: column !important;
		}
	}
</style>